import {ModalForm, ProFormInstance, ProFormTextArea} from '@ant-design/pro-components';
import React, {useRef} from 'react';


export type CreateOrUpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.DataMediaPair) => void;
  onSubmit: (values?: API.BatchDataMediaPair) => Promise<void>;
  updateModalOpen: boolean;
  values?: Partial<number>;
  title?: string;
};


const BatchCreateForm: React.FC<CreateOrUpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  return (<ModalForm
      title={props?.title}
      layout={"horizontal"}
      labelAlign={"right"}
      width="700px"
      formRef={formRef}
      open={props.updateModalOpen}
      onFinish={props.onSubmit}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.onCancel(),
      }}
    >
      <ProFormTextArea
        fieldProps={{showCount:true}}
        style={{height:200}}
        tooltip={<>
          格式(红色为必填)：<br/>
          1. 最简配置<br/>
          <span style={{color: "red"}}>schema,table,sourceId1,sourceId2,</span>loadWeight<br/>
          2. 表名不一致 <br/>
          <span style={{color: "red"}}>schema1,table1,sourceId1,schema2,table2,sourceId2,</span>loadWeight<br/>
        </>
      }
        name={['resolverData', 'sourceText']}
        label={'FileResolver文本'}
      />
    </ModalForm>
  );
};

export default BatchCreateForm;
